<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            overflow-y: auto;
            .firstComment{
                width: 100%;
                height: 10%;
                position: relative;
                border: 1px solid black;
                overflow-y: auto;
                .secondback{
                    position: absolute;
                    top: 25%;
                    right: 2%;
                }
                .secondComment{
                    width: 80%;
                    /* height: 100%; */
                    margin-left: 20%;
                    background-color: aqua;
                }
            }
        }
    </style>
</head>
<body>
    <!--成功-->
    <div class="box">
        <span>文章内容</span>
        <button class="firstback">回复</button>
        <div class="firstComment">
            <p>这是第一条评论</p>
            <button class="secondback">回复</button>   
        </div>
    </div>
</body>
</html>
<script>
    const box=document.querySelector('.box')
    document.addEventListener('click',function(e){
        if(e.target.classList.contains('firstback')){
            const firstComment=document.createElement('div')
            firstComment.innerHTML=`
                <div class="firstComment">
                    <p>这是第一条评论</p>
                    <button class="secondback">回复</button>
                </div>
            `
            box.appendChild(firstComment)
        }
        if(e.target.classList.contains('secondback')&&e.target.closest('.firstComment')){
            console.log('第一条评论回复被点击了')
            const secondComment=document.createElement('div')
            secondComment.innerHTML=`
                <div class="secondComment">
                    <p>这是二级评论</p>
                    <button class="lastback">回复</button>
                </div>
            `
            const firstComment=e.target.closest('.firstComment')
            firstComment.appendChild(secondComment)
        }
        if(e.target.classList.contains('lastback')&&e.target.closest('.secondComment')){
            const secondComment=document.createElement('div')
            secondComment.innerHTML=`
                <div class="secondComment">
                    <p>这是多级评论</p>
                    <button class="lastback">回复</button>
                </div>
            `
            const firstComment=e.target.closest('.firstComment')
            firstComment.appendChild(secondComment)
        }
    })
</script>